<template>
  <div style="padding: 10px">
    <div>
      <span style="">
        <el-input v-model="filter.keyword" placeholder="请输入关键字" style="width: 200px" size="mini" clearable></el-input>
      </span>
      <span style="padding-left: 5px"><el-button size="mini" @click="handleSearch">搜索</el-button></span>
      <span style="padding-left: 5px"><el-button type="primary" size="mini" @click="handleSubmit">提交</el-button></span>
    </div>
    <div style="padding-top: 10px">
      <el-table :data="products" border fit highlight-current-row ref="table" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="编码">
          <template slot-scope="scope">
            {{ scope.row.code }}
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            {{ $enums.productType.get(scope.row.type).text }}
          </template>
        </el-table-column>
        <el-table-column label="规格型号">
          <template slot-scope="scope">
            {{ scope.row.model }}
          </template>
        </el-table-column>
        <el-table-column label="计价单位">
          <template slot-scope="scope">
            {{ scope.row.basicUnitName }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="float: right">
      <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
        :current-page.sync="filter.pageIndex" :page-sizes="[10, 20, 50, 100, 200, 500]"
        :page-size.sync="filter.pageSize" :prev-click="handlePrePage" :next-click="handleNextPage"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getProducts } from "@/api/product"
import typeSelect from "@/components/Select/productTypeSelect.vue";
export default {
  components: { typeSelect },
  data() {
    return {
      products: [],
      filter: {
        keyword: null,
        types: this.types,
        purchasable: this.purchasable,
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      selectedRows: []
    };
  },
  methods: {
    getData() {
      getProducts(this.filter)
        .then(res => {
          if (!res || !res.items)
            this.products = [];
          else {
            this.products = res.items;
            this.total = res.totalCount;
          }
        })
    },
    handlePageChange(pageIndex) {
      this.filter.pageIndex = pageIndex;
      this.getData();
    },
    handleSizeChange(pageSize) {
      this.filter.pageSize = pageSize;
      this.getData();
    },
    handlePrePage(currentPageIndex) {
      this.filter.pageIndex = currentPageIndex - 1;
    },
    handleNextPage(currentPageIndex) {
      this.filter.pageIndex = currentPageIndex + 1;
    },
    handleRefresh() {
      this.pageIndex = 1;
      this.pageSize = 10;
      this.getData();
    },
    handleSearch() {
      this.handleRefresh();
    },
    handleSubmit() {
      this.$emit("selected", this.selectedRows)
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    }
  },
  watch: {
    types: {
      handler(value) {
        if (!value) {
          this.products = [];

          return;
        }

        this.getData();
      }
    }
  },
  mounted() {
    this.getData();
  },
  props: {
    types: {
      type: Array,
      default: () => [],
    },
    purchasable: {
      type: Boolean,
      default: null
    }
  },
};
</script>
<style scoped></style>